import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:smart_devices/bruno/src/components/tabbar/normal/brn_tab_bar.dart';
import 'package:smart_devices/icons/src/antd_icons.dart';
import 'package:smart_devices/routes/index.dart';
import 'package:smart_devices/ui/draw_under_line.dart';
import 'package:smart_devices/utils/colors.dart';
import 'package:smart_devices/utils/styles.dart';
import 'package:smart_devices/utils/tools.dart';

import 'info_logic.dart';

class MaintainInfoView extends GetView<MaintainInfoLogic> {
  const MaintainInfoView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Obx(() => DefaultTabController(
          length: controller.tabs.length,
          child: Scaffold(
            appBar: AppBar(
              leading: IconButton(
                icon: const Icon(
                  Icons.arrow_back_ios,
                  color: Colors.white,
                  size: 15,
                ),
                onPressed: Get.back,
              ),
              automaticallyImplyLeading: false,
              title: Text(
                '工单详情',
                style: StylesUtils.customTextStyle(
                    fontSize: 18, fontWeight: FontWeight.w700),
              ),
              centerTitle: true,
            ),
            body: NestedScrollView(
              headerSliverBuilder:
                  (BuildContext context, bool innerBoxIsScrolled) {
                return buildHeadWidget(context);
              },
              body: TabBarView(
                controller: controller.tabController,
                children: controller.tabs.map((BadgeTab tab) {
                  return Builder(builder: (context) {
                    return CustomScrollView(
                      key: PageStorageKey<String>(tab.text ?? ''),
                      slivers: <Widget>[
                        SliverPadding(
                          padding: EdgeInsets.zero,
                          sliver: buildSliverList(tab),
                        ),
                      ],
                      // controller: controller,
                    );
                  });
                }).toList(),
              ),
            ),
          ),
        ));
  }

  List<Widget> buildHeadWidget(BuildContext context) {
    return [
      SliverToBoxAdapter(
        child: DrawUnderLine(
          child: Container(
            decoration: const BoxDecoration(color: Colors.white),
            margin: const EdgeInsets.only(bottom: 10),
            child: Column(
              children: [
                Row(
                  children: [
                    Container(
                      width: 140,
                      height: 140,
                      alignment: Alignment.center,
                      child: Container(
                        width: 120,
                        height: 120,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: ColorsUtils.parseColorFromHexString(
                              ColorsUtils.color669e),
                        ),
                        child: ToolsUtils.urlSvg(
                            'https://cdn7.axureshop.com/demo2023/2163241/images/设备/u48846.svg',
                            width: 46,
                            height: 58),
                      ),
                    ),
                    Expanded(
                        child: Container(
                      padding: const EdgeInsets.symmetric(vertical: 10),
                      child: Column(
                        children: [
                          Container(
                            height: 40,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              controller.details.value.name,
                              style: StylesUtils.customTextStyle(
                                  fontSize: 18,
                                  fontWeight: FontWeight.w700,
                                  color: ColorsUtils.color1c24),
                            ),
                          ),
                          Container(
                            height: 30,
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 5,
                              children: [
                                Text(
                                  '设备编号：',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333),
                                ),
                                Text(
                                  controller.details.value.code,
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.colorAaaa),
                                )
                              ],
                            ),
                          ),
                          Container(
                            height: 30,
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 5,
                              children: [
                                Text(
                                  '规格型号：',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333),
                                ),
                                Text(
                                  controller.details.value.model,
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.colorAaaa),
                                )
                              ],
                            ),
                          ),
                          Container(
                            height: 30,
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 5,
                              children: [
                                Text(
                                  '设备类型：',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333),
                                ),
                                Text(
                                  controller.details.value.code,
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.colorAaaa),
                                )
                              ],
                            ),
                          )
                        ],
                      ),
                    ))
                  ],
                ),
                Container(
                  height: 30,
                  padding: const EdgeInsets.only(left: 20),
                  alignment: Alignment.centerLeft,
                  child: Wrap(
                    spacing: 5,
                    children: [
                      Text(
                        '使用部门：',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color3333),
                      ),
                      Text(
                        '生产部门',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.colorAaaa),
                      )
                    ],
                  ),
                ),
                Container(
                  height: 30,
                  padding: const EdgeInsets.only(left: 20),
                  alignment: Alignment.centerLeft,
                  child: Wrap(
                    spacing: 5,
                    children: [
                      Text(
                        '存放位置：',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color3333),
                      ),
                      Text(
                        '新产品N205生产车间二层一车间',
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.colorAaaa),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      SliverPersistentHeader(
        pinned: true,
        delegate: CommonSilverAppBarDelegate(
            Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border(
                        bottom: BorderSide(
                            color: ColorsUtils.rgba(235, 235, 235, 1)))),
                child: BrnTabBar(
                  tabs: controller.tabs,
                  controller: controller.tabController,
                  isScroll: true,
                  tabWidth: 80,
                  tagHeight: 50,
                  tagSpacing: 10,
                  labelStyle:
                      StylesUtils.customTextStyle(color: ColorsUtils.color0052),
                  labelColor: ColorsUtils.parseColorFromHexString(
                      ColorsUtils.color0052),
                  unselectedLabelStyle:
                      StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                  unselectedLabelColor: ColorsUtils.parseColorFromHexString(
                      ColorsUtils.color3333),
                  indicatorColor: ColorsUtils.parseColorFromHexString(
                      ColorsUtils.color0052),
                  indicatorWeight: 3,
                  indicatorWidth: 30,
                )),
            height: 50),
      ),
    ];
  }

  Widget buildSliverList(BadgeTab tab) {
    return SliverList.list(children: [
      Container(
        margin: const EdgeInsets.only(top: 10),
        color: Colors.white,
        child: ListBody(
          children: [
            SizedBox(
              height: 40,
              child: CustomPaint(
                  painter: _MyCustomPaintLine(),
                  child: Container(
                    margin: const EdgeInsets.only(left: 30),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      tab.text ?? '',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color6666),
                    ),
                  )),
            ),
            SizedBox(
              height: 50,
              child: Row(
                children: [
                  Container(
                    width: 100,
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: 30),
                    child: Text(
                      '是否更换',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color3333),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.only(left: 10),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '是',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color9999),
                      ),
                    ),
                  )
                ],
              ),
            ),
            SizedBox(
              height: 50,
              child: Row(
                children: [
                  Container(
                    width: 100,
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: 30),
                    child: Text(
                      '领用单号',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color3333),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.only(left: 10),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'LY2022645',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color9999),
                      ),
                    ),
                  )
                ],
              ),
            ),
            SizedBox(
              height: 50,
              child: Row(
                children: [
                  Container(
                    width: 100,
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: 30),
                    child: Text(
                      '领用主题',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color3333),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.only(left: 10),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '备件领用申请202224',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color9999),
                      ),
                    ),
                  )
                ],
              ),
            ),
            SizedBox(
              height: 50,
              child: Row(
                children: [
                  Container(
                    width: 100,
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: 30),
                    child: Text(
                      '申请时间',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color3333),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.only(left: 10),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '2023-10-17',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color9999),
                      ),
                    ),
                  )
                ],
              ),
            ),
            SizedBox(
              height: 50,
              child: Row(
                children: [
                  Container(
                    width: 100,
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: 30),
                    child: Text(
                      '领用原因',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color3333),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.only(left: 10),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '失灵',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color9999),
                      ),
                    ),
                  )
                ],
              ),
            ),
            SizedBox(
              height: 50,
              child: Row(
                children: [
                  Container(
                    width: 100,
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: 30),
                    child: Text(
                      '仓库名称',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color3333),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.only(left: 10),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '仓库一',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color9999),
                      ),
                    ),
                  )
                ],
              ),
            ),
            SizedBox(
              height: 50,
              child: Row(
                children: [
                  Container(
                    width: 100,
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: 30),
                    child: Text(
                      '申请备件',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color3333),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.only(left: 10),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '3种备件，总数量6',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color9999),
                      ),
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      Get.toNamed(Routes.deviceSpareParticulars);
                    },
                    child: Container(
                      width: 50,
                      alignment: Alignment.center,
                      child: Icon(
                        AntdIcons.right,
                        color: ColorsUtils.parseColorFromHexString(
                            ColorsUtils.color9999),
                        size: 15,
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      )
    ]);
  }
}

class CommonSilverAppBarDelegate extends SliverPersistentHeaderDelegate {
  CommonSilverAppBarDelegate(this.child, {this.height = 70});

  final Widget child;

  final double height;

  @override
  double get minExtent => height;

  @override
  double get maxExtent => height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return this != oldDelegate;
  }
}

class _MyCustomPaintLine extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    /// w = 10, h = 20
    Paint paint = Paint()
      ..isAntiAlias = false
      ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.color0052)
      ..style = PaintingStyle.fill;
    Rect rect = const Rect.fromLTWH(10, 10, 10, 20);
    canvas.drawRect(rect, paint);

    Offset p1 = Offset(0, size.height);
    Offset p2 = Offset(size.width, size.height);

    canvas.drawLine(
        p1,
        p2,
        paint
          ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.colorE4e4));
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
